<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>好好吃饭 - AI智能菜谱助手</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #FF6B6B;
            --secondary-color: #4ECDC4;
            --dark-color: #292F36;
            --light-color: #F7FFF7;
            --accent-color: #FFE66D;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Noto Sans SC', sans-serif;
        }
        
        body {
            background-color: var(--light-color);
            color: var(--dark-color);
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        .app-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            border-bottom: 2px solid var(--primary-color);
            margin-bottom: 30px;
        }
        
        .logo {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-color);
            display: flex;
            align-items: center;
        }
        
        .logo span {
            color: var(--dark-color);
            margin-left: 10px;
        }
        
        .logo-icon {
            width: 40px;
            height: 40px;
            background-color: var(--primary-color);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            margin-right: 10px;
            font-size: 1.5rem;
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li {
            margin-left: 20px;
        }
        
        nav ul li a {
            text-decoration: none;
            color: var(--dark-color);
            font-weight: 500;
            padding: 8px 15px;
            border-radius: 20px;
            transition: all 0.3s ease;
        }
        
        nav ul li a:hover, nav ul li a.active {
            background-color: var(--primary-color);
            color: white;
        }
        
        .page {
            display: none;
            animation: fadeIn 0.5s ease;
        }
        
        .page.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 首页样式 */
        .hero {
            text-align: center;
            padding: 50px 0;
        }
        
        .hero h1 {
            font-size: 3rem;
            margin-bottom: 20px;
            color: var(--primary-color);
        }
        
        .hero p {
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto 30px;
            line-height: 1.6;
        }
        
        .cta-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 40px;
        }
        
        .btn {
            padding: 12px 25px;
            border-radius: 30px;
            border: none;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #e05555;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
        }
        
        .btn-secondary {
            background-color: var(--secondary-color);
            color: white;
        }
        
        .btn-secondary:hover {
            background-color: #3dbeb5;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(78, 205, 196, 0.3);
        }
        
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 60px;
        }
        
        .feature-card {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            width: 60px;
            height: 60px;
            background-color: var(--accent-color);
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            font-size: 1.8rem;
            color: var(--dark-color);
        }
        
        .feature-card h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--primary-color);
        }
        
        .feature-card p {
            color: #666;
            line-height: 1.6;
        }
        
        /* 食材选择页面样式 */
        .ingredients-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .ingredient-tag {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 20px;
            padding: 8px 15px;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .ingredient-tag.selected {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .ingredient-tag .remove {
            margin-left: 8px;
            font-size: 0.8rem;
            opacity: 0.7;
        }
        
        .ingredient-input {
            display: flex;
            margin-bottom: 30px;
        }
        
        .ingredient-input input {
            flex: 1;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 25px 0 0 25px;
            font-size: 1rem;
            outline: none;
        }
        
        .ingredient-input button {
            padding: 12px 20px;
            background-color: var(--secondary-color);
            color: white;
            border: none;
            border-radius: 0 25px 25px 0;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .ingredient-input button:hover {
            background-color: #3dbeb5;
        }
        
        .generate-btn {
            width: 100%;
            padding: 15px;
            margin-bottom: 30px;
            font-size: 1.1rem;
        }
        
        .recipe-result {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
            display: none;
        }
        
        .recipe-result h3 {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: var(--primary-color);
        }
        
        .recipe-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            color: #666;
        }
        
        .recipe-content {
            line-height: 1.8;
        }
        
        .recipe-content h4 {
            margin: 20px 0 10px;
            color: var(--secondary-color);
        }
        
        .recipe-actions {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        /* 收藏页面样式 */
        .saved-recipes {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
        }
        
        .recipe-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        
        .recipe-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .recipe-image {
            height: 180px;
            background-color: #eee;
            background-size: cover;
            background-position: center;
            position: relative;
        }
        
        .recipe-image::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
        }
        
        .recipe-title {
            position: absolute;
            bottom: 15px;
            left: 15px;
            color: white;
            font-size: 1.3rem;
            z-index: 1;
        }
        
        .recipe-details {
            padding: 20px;
        }
        
        .recipe-meta-small {
            display: flex;
            justify-content: space-between;
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 15px;
        }
        
        .recipe-description {
            color: #555;
            line-height: 1.5;
            margin-bottom: 15px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .recipe-card-actions {
            display: flex;
            justify-content: space-between;
        }
        
        .no-recipes {
            text-align: center;
            padding: 50px;
            color: #666;
        }
        
        /* 加载动画 */
        .loader {
            display: none;
            text-align: center;
            padding: 30px;
        }
        
        .loader-spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            header {
                flex-direction: column;
                text-align: center;
            }
            
            nav ul {
                margin-top: 20px;
            }
            
            .hero h1 {
                font-size: 2.2rem;
            }
            
            .cta-buttons {
                flex-direction: column;
                gap: 15px;
            }
            
            .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <header>
            <div class="logo">
                <div class="logo-icon">🍳</div>
                好好吃饭<span>AI智能菜谱助手</span>
            </div>
            <nav>
                <ul>
                    <li><a href="#" class="nav-link active" data-page="home">首页</a></li>
                    <li><a href="#" class="nav-link" data-page="ingredients">智能推荐</a></li>
                    <li><a href="#" class="nav-link" data-page="saved">我的收藏</a></li>
                </ul>
            </nav>
        </header>
        
        <!-- 首页 -->
        <div class="page active" id="home">
            <div class="hero">
                <h1>让AI为您创造美味</h1>
                <p>只需选择您现有的食材，我们的AI智能菜谱助手将为您生成个性化的美味菜谱，让烹饪变得简单而有趣。</p>
                <div class="cta-buttons">
                    <button class="btn btn-primary start-cooking" data-page="ingredients">
                        <span>开始烹饪</span> →
                    </button>
                    <button class="btn btn-secondary view-saved" data-page="saved">
                        <span>查看收藏</span> ♥
                    </button>
                </div>
            </div>
            
            <div class="features">
                <div class="feature-card">
                    <div class="feature-icon">🧠</div>
                    <h3>智能推荐</h3>
                    <p>基于您现有的食材，AI将智能分析并推荐最适合的菜谱，减少食物浪费，激发烹饪灵感。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">⏱️</div>
                    <h3>节省时间</h3>
                    <p>不再为"今天吃什么"而烦恼，快速获得多种烹饪方案，让您有更多时间享受美食。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🌟</div>
                    <h3>创意无限</h3>
                    <p>发现您从未尝试过的食材组合和烹饪方法，拓展您的烹饪视野和技能。</p>
                </div>
            </div>
        </div>
        
        <!-- 食材选择页面 -->
        <div class="page" id="ingredients">
            <h2>选择您现有的食材</h2>
            <p>从下方选择或添加您的食材，AI将为您生成个性化菜谱</p>
            
            <div class="ingredient-input">
                <input type="text" id="new-ingredient" placeholder="输入食材名称，如'西红柿'">
                <button id="add-ingredient">添加</button>
            </div>
            
            <div class="ingredients-container" id="ingredients-list">
                <!-- 动态生成的食材标签将出现在这里 -->
            </div>
            
            <button class="btn btn-primary generate-btn" id="generate-recipe">
                生成菜谱 🍽️
            </button>
            
            <div class="loader" id="recipe-loader">
                <div class="loader-spinner"></div>
                <p>AI正在为您精心设计菜谱...</p>
            </div>
            
            <div class="recipe-result" id="recipe-result">
                <h3 id="recipe-title">番茄炒蛋</h3>
                <div class="recipe-meta">
                    <span>⏱️ 准备时间: <span id="recipe-time">15分钟</span></span>
                    <span>👨‍🍳 难度: <span id="recipe-difficulty">简单</span></span>
                    <span>🍽️ 份量: <span id="recipe-servings">2人份</span></span>
                </div>
                <div class="recipe-content" id="recipe-content">
                    <h4>食材</h4>
                    <ul id="recipe-ingredients">
                        <li>番茄 2个</li>
                        <li>鸡蛋 3个</li>
                        <li>盐 适量</li>
                        <li>糖 少许</li>
                        <li>油 适量</li>
                    </ul>
                    
                    <h4>步骤</h4>
                    <ol id="recipe-steps">
                        <li>番茄洗净切块，鸡蛋打散备用</li>
                        <li>热锅凉油，倒入蛋液炒至凝固，盛出备用</li>
                        <li>锅中再加少许油，放入番茄翻炒至出汁</li>
                        <li>加入炒好的鸡蛋，调入盐和糖，翻炒均匀即可</li>
                    </ol>
                    
                    <h4>小贴士</h4>
                    <p id="recipe-tips">炒蛋时火候不要太大，以免变老。喜欢汤汁多的可以加少许水。</p>
                </div>
                <div class="recipe-actions">
                    <button class="btn btn-primary" id="save-recipe">收藏菜谱 ♥</button>
                    <button class="btn btn-secondary" id="generate-another">再生成一个</button>
                </div>
            </div>
        </div>
        
        <!-- 收藏页面 -->
        <div class="page" id="saved">
            <h2>我的收藏</h2>
            <p>您保存的所有菜谱将显示在这里</p>
            
            <div class="saved-recipes" id="saved-recipes-list">
                <!-- 动态生成的收藏菜谱将出现在这里 -->
                <div class="no-recipes" id="no-recipes-message">
                    <p>您还没有收藏任何菜谱</p>
                    <button class="btn btn-primary" data-page="ingredients">去生成菜谱</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 页面导航
        document.querySelectorAll('.nav-link, .start-cooking, .view-saved').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const pageId = this.getAttribute('data-page');
                
                // 更新导航活动状态
                document.querySelectorAll('.nav-link').forEach(nav => {
                    nav.classList.remove('active');
                });
                this.classList.add('active');
                
                // 切换页面
                document.querySelectorAll('.page').forEach(page => {
                    page.classList.remove('active');
                });
                document.getElementById(pageId).classList.add('active');
                
                // 如果切换到收藏页面，更新收藏列表
                if (pageId === 'saved') {
                    updateSavedRecipesList();
                }
            });
        });
        
        // 食材管理
        const ingredients = [];
        const ingredientsList = document.getElementById('ingredients-list');
        const newIngredientInput = document.getElementById('new-ingredient');
        const addIngredientBtn = document.getElementById('add-ingredient');
        
        // 添加食材
        addIngredientBtn.addEventListener('click', addIngredient);
        newIngredientInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                addIngredient();
            }
        });
        
        function addIngredient() {
            const ingredientName = newIngredientInput.value.trim();
            if (ingredientName && !ingredients.includes(ingredientName)) {
                ingredients.push(ingredientName);
                renderIngredientsList();
                newIngredientInput.value = '';
            }
        }
        
        // 渲染食材列表
        function renderIngredientsList() {
            ingredientsList.innerHTML = '';
            ingredients.forEach(ingredient => {
                const tag = document.createElement('div');
                tag.className = 'ingredient-tag selected';
                tag.innerHTML = `
                    ${ingredient}
                    <span class="remove">×</span>
                `;
                tag.querySelector('.remove').addEventListener('click', () => {
                    removeIngredient(ingredient);
                });
                ingredientsList.appendChild(tag);
            });
        }
        
        // 移除食材
        function removeIngredient(ingredient) {
            const index = ingredients.indexOf(ingredient);
            if (index !== -1) {
                ingredients.splice(index, 1);
                renderIngredientsList();
            }
        }
        
        // 生成菜谱
        const generateBtn = document.getElementById('generate-recipe');
        const recipeLoader = document.getElementById('recipe-loader');
        const recipeResult = document.getElementById('recipe-result');
        
        generateBtn.addEventListener('click', generateRecipe);
        document.getElementById('generate-another').addEventListener('click', generateRecipe);
        
        async function generateRecipe() {
            if (ingredients.length === 0) {
                alert('请至少添加一种食材');
                return;
            }
            
            // 显示加载状态
            recipeResult.style.display = 'none';
            recipeLoader.style.display = 'block';
            
            try {
                // 调用DeepSeek API
                const response = await callDeepSeekAPI(ingredients);
                
                // 解析响应并更新UI
                updateRecipeUI(response);
                
                // 显示结果
                recipeLoader.style.display = 'none';
                recipeResult.style.display = 'block';
            } catch (error) {
                console.error('生成菜谱失败:', error);
                recipeLoader.innerHTML = '<p>生成菜谱失败，请稍后再试</p>';
            }
        }
        
        // 调用DeepSeek API
        async function callDeepSeekAPI(ingredientsList) {
            // 这里使用您提供的DeepSeek API密钥
            const apiKey = 'sk-c6a7fb0a88f04c45a858716ce9aec15c';
            const apiUrl = 'https://api.deepseek.com/v1/chat/completions';
            
            const prompt = `根据以下食材生成一份详细的中文菜谱: ${ingredientsList.join(', ')}。请按照以下格式返回结果:
            
            菜谱名称: [菜名]
            准备时间: [时间]
            难度: [简单/中等/复杂]
            份量: [几人份]
            
            ### 食材:
            - 食材1 用量
            - 食材2 用量
            ...
            
            ### 步骤:
            1. 第一步
            2. 第二步
            ...
            
            ### 小贴士:
            [一些烹饪技巧或建议]`;
            
            const response = await fetch(apiUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${apiKey}`
                },
                body: JSON.stringify({
                    model: 'deepseek-chat',
                    messages: [
                        {
                            role: 'user',
                            content: prompt
                        }
                    ],
                    temperature: 0.7,
                    max_tokens: 1000
                })
            });
            
            if (!response.ok) {
                throw new Error(`API请求失败: ${response.status}`);
            }
            
            const data = await response.json();
            return data.choices[0].message.content;
        }
        
        // 更新菜谱UI
        function updateRecipeUI(recipeText) {
            // 这里简化处理，实际应用中需要更复杂的解析逻辑
            const titleMatch = recipeText.match(/菜谱名称:\s*(.+)/);
            const timeMatch = recipeText.match(/准备时间:\s*(.+)/);
            const difficultyMatch = recipeText.match(/难度:\s*(.+)/);
            const servingsMatch = recipeText.match(/份量:\s*(.+)/);
            
            const ingredientsStart = recipeText.indexOf('### 食材:');
            const stepsStart = recipeText.indexOf('### 步骤:');
            const tipsStart = recipeText.indexOf('### 小贴士:');
            
            let ingredientsContent = '';
            let stepsContent = '';
            let tipsContent = '';
            
            if (ingredientsStart !== -1 && stepsStart !== -1) {
                ingredientsContent = recipeText.substring(ingredientsStart + 5, stepsStart).trim();
            }
            
            if (stepsStart !== -1 && tipsStart !== -1) {
                stepsContent = recipeText.substring(stepsStart + 5, tipsStart).trim();
            }
            
            if (tipsStart !== -1) {
                tipsContent = recipeText.substring(tipsStart + 6).trim();
            }
            
            // 更新DOM元素
            if (titleMatch) document.getElementById('recipe-title').textContent = titleMatch[1];
            if (timeMatch) document.getElementById('recipe-time').textContent = timeMatch[1];
            if (difficultyMatch) document.getElementById('recipe-difficulty').textContent = difficultyMatch[1];
            if (servingsMatch) document.getElementById('recipe-servings').textContent = servingsMatch[1];
            
            document.getElementById('recipe-ingredients').innerHTML = ingredientsContent.split('\n').map(item => `<li>${item.replace(/^- /, '').trim()}</li>`).join('');
            document.getElementById('recipe-steps').innerHTML = stepsContent.split('\n').map((step, index) => {
                const stepText = step.replace(/^\d+\.\s*/, '').trim();
                return `<li>${stepText}</li>`;
            }).join('');
            document.getElementById('recipe-tips').textContent = tipsContent;
        }
        
        // 收藏菜谱
        document.getElementById('save-recipe').addEventListener('click', saveRecipe);
        
        function saveRecipe() {
            const savedRecipes = JSON.parse(localStorage.getItem('savedRecipes')) || [];
            
            const recipe = {
                id: Date.now(),
                title: document.getElementById('recipe-title').textContent,
                time: document.getElementById('recipe-time').textContent,
                difficulty: document.getElementById('recipe-difficulty').textContent,
                servings: document.getElementById('recipe-servings').textContent,
                ingredients: document.getElementById('recipe-ingredients').innerHTML,
                steps: document.getElementById('recipe-steps').innerHTML,
                tips: document.getElementById('recipe-tips').textContent,
                date: new Date().toLocaleDateString()
            };
            
            savedRecipes.push(recipe);
            localStorage.setItem('savedRecipes', JSON.stringify(savedRecipes));
            
            alert('菜谱已收藏!');
        }
        
        // 更新收藏列表
        function updateSavedRecipesList() {
            const savedRecipes = JSON.parse(localStorage.getItem('savedRecipes')) || [];
            const savedRecipesList = document.getElementById('saved-recipes-list');
            const noRecipesMessage = document.getElementById('no-recipes-message');
            
            if (savedRecipes.length === 0) {
                noRecipesMessage.style.display = 'block';
                savedRecipesList.innerHTML = '';
                savedRecipesList.appendChild(noRecipesMessage);
                return;
            }
            
            noRecipesMessage.style.display = 'none';
            savedRecipesList.innerHTML = '';
            
            savedRecipes.forEach(recipe => {
                const recipeCard = document.createElement('div');
                recipeCard.className = 'recipe-card';
                recipeCard.innerHTML = `
                    <div class="recipe-image" style="background-image: url('https://source.unsplash.com/random/300x180/?${encodeURIComponent(recipe.title)},food')">
                        <h3 class="recipe-title">${recipe.title}</h3>
                    </div>
                    <div class="recipe-details">
                        <div class="recipe-meta-small">
                            <span>⏱️ ${recipe.time}</span>
                            <span>👨‍🍳 ${recipe.difficulty}</span>
                            <span>🍽️ ${recipe.servings}</span>
                        </div>
                        <p class="recipe-description">${recipe.tips || '暂无描述'}</p>
                        <div class="recipe-card-actions">
                            <button class="btn btn-primary view-recipe" data-id="${recipe.id}">查看详情</button>
                            <button class="btn btn-secondary remove-recipe" data-id="${recipe.id}">删除</button>
                        </div>
                    </div>
                `;
                
                savedRecipesList.appendChild(recipeCard);
            });
            
            // 添加查看详情和删除事件监听
            document.querySelectorAll('.view-recipe').forEach(btn => {
                btn.addEventListener('click', function() {
                    const recipeId = parseInt(this.getAttribute('data-id'));
                    viewRecipeDetails(recipeId);
                });
            });
            
            document.querySelectorAll('.remove-recipe').forEach(btn => {
                btn.addEventListener('click', function() {
                    const recipeId = parseInt(this.getAttribute('data-id'));
                    removeRecipe(recipeId);
                });
            });
        }
        
        // 查看收藏的菜谱详情
        function viewRecipeDetails(recipeId) {
            const savedRecipes = JSON.parse(localStorage.getItem('savedRecipes')) || [];
            const recipe = savedRecipes.find(r => r.id === recipeId);
            
            if (!recipe) return;
            
            // 更新菜谱结果区域
            document.getElementById('recipe-title').textContent = recipe.title;
            document.getElementById('recipe-time').textContent = recipe.time;
            document.getElementById('recipe-difficulty').textContent = recipe.difficulty;
            document.getElementById('recipe-servings').textContent = recipe.servings;
            document.getElementById('recipe-ingredients').innerHTML = recipe.ingredients;
            document.getElementById('recipe-steps').innerHTML = recipe.steps;
            document.getElementById('recipe-tips').textContent = recipe.tips;
            
            // 隐藏保存按钮(因为是已保存的菜谱)
            document.getElementById('save-recipe').style.display = 'none';
            
            // 切换到菜谱生成页面
            document.querySelectorAll('.nav-link').forEach(nav => {
                nav.classList.remove('active');
            });
            document.querySelector('.nav-link[data-page="ingredients"]').classList.add('active');
            
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            document.getElementById('ingredients').classList.add('active');
            
            // 显示结果
            recipeLoader.style.display = 'none';
            recipeResult.style.display = 'block';
        }
        
        // 删除收藏的菜谱
        function removeRecipe(recipeId) {
            if (confirm('确定要删除这个菜谱吗?')) {
                let savedRecipes = JSON.parse(localStorage.getItem('savedRecipes')) || [];
                savedRecipes = savedRecipes.filter(r => r.id !== recipeId);
                localStorage.setItem('savedRecipes', JSON.stringify(savedRecipes));
                updateSavedRecipesList();
            }
        }
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            // 预加载一些常见食材
            const commonIngredients = ['鸡蛋', '西红柿', '鸡肉', '大米', '土豆', '胡萝卜', '牛肉', '洋葱', '青椒', '豆腐'];
            commonIngredients.forEach(ing => {
                if (!ingredients.includes(ing)) {
                    ingredients.push(ing);
                }
            });
            renderIngredientsList();
            
            // 检查是否有收藏的菜谱
            updateSavedRecipesList();
        });
    </script>
</body>
</html>